<template>
  <div class="m-hotsport u-home-top">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="热点" height=".88rem" bgcolor="#f00385" color="#fff" fontsize=".3rem" :fixed="true"></yd-navbar>

    <!-- tab栏 -->
    <w-tab @changePage="onChangeTab" :indexTab="hotType" v-if="hotspotTypeList.length">
      <w-tab-panel v-for="(type, index) in hotspotTypeList" :key="index" :label="type.typeName" :hash="type.id">
        <List :id="type.id" v-if="hotType == type.id" />
      </w-tab-panel>
    </w-tab>
  </div>
</template>

<script>
  import { apiHotspotType } from 'js/api'
  import List from './list.vue'
  
  export default {
    data() {
      return {
        hotType: '',
        hotspotTypeList: []
      }
    },
    created() {
      apiHotspotType().then(data => {
        this.hotspotTypeList = data.hotspotTypeLists
      })
    },
    methods: {
      onChangeTab(hash) {
        this.hotType = hash
      }
    },
    components: {
      List
    }
  }
</script>

<style lang="scss">
  
</style>